{% extends "base/base_layout.html" %}
{% load static %}
{% block sidebar_option %}
    sidebar-collapse
{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static "enlighterjs/enlighterjs.min.css" %}"/>
    <style>
        pre {
            white-space: pre-wrap; /* css-3 */
            white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: -o-pre-wrap; /* Opera 7 */
            word-wrap: break-word; /* Internet Explorer 5.5+ */
        }

        /* custom yellow line highlight */
        .enlighter-t-enlighter div.enlighter > div.enlighter-special {
            background-color: #fff8bb;
        }

    </style>
{% endblock %}
{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="box box-default">
                                <div class="box-body">
                                    <h3>{{ file }} </h3>
                                    <br/>
                                    {% if sqlite %}
                                        {% for table, data in sqlite.items %}
                                            <div class="box">
                                                <div class="box-header">
                                                    <h4 class="box-title"><b>{{ table }}</b></h4>
                                                </div>
                                                <!-- /.box-header -->
                                                <div class="box-body no-padding">
                                                    <div class="table-responsive">
                                                        <table class="table table-striped">
                                                            <tbody>
                                                            <tr>
                                                                {% for head in data|key:"head" %}
                                                                    <th>{{ head }}</th>
                                                                {% endfor %}
                                                            </tr>
                                                            {% for dat in data|key:"data" %}
                                                                <tr>
                                                                    {% for item in dat %}
                                                                        <td style="word-wrap: break-word;min-width: 160px;max-width: 160px;">{{ item }}</td>
                                                                    {% endfor %}
                                                                </tr>
                                                            {% endfor %}

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                                <!-- /.box-body -->
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <pre id="code_block">{{ data }}</pre>
                                    {% endif %}
                                </div>
                                <!-- /.box-body -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_scripts %}
    <script type="text/javascript" src="{% static "enlighterjs/enlighterjs.min.js" %}"></script>

    <!-- Init Code -->
    <script type="text/javascript">
        const get_lines = function () {
            const pat = new RegExp(/^[\d,]{1,1000}$/);
            const urlParams = new URLSearchParams(window.location.search);
            var i;
            var lines = urlParams.get("lines");
            if (!pat.test(lines)) {
                return 0;
            } else {
                const parts = lines.split(",");
                for (i = 0; i < parts.length; i++) {
                    if (parseInt(parts[i]) > 50000)
                        return 0;
                }
                return lines;
            }
        }
        code_blk = document.getElementById('code_block');
        if (code_blk) {
            EnlighterJS.enlight(code_blk, {
                theme: 'enlighter',
                linehover: false,
                textOverflow: 'scroll',
                highlight: get_lines(),
                language: '{{ type }}',
            });
        }
        const toolbar = document.getElementsByClassName("enlighter-toolbar")[0];
        if (toolbar)
            toolbar.style.display = 'none';
        const hcls = document.getElementsByClassName("enlighter-special")[0];
        if (hcls) {
            if (hcls.scrollIntoViewIfNeeded)
                hcls.scrollIntoViewIfNeeded();
            else
                hcls.scrollIntoView();
        }

    </script>
{% endblock %}